<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>哔哩哔哩卡片标签外挂 | HMuSeaB の 小站</title><meta name="author" content="HMuSeaB"><meta name="copyright" content="HMuSeaB"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="2023-04-04更新：更新连接匹配问题。例如 https:&#x2F;&#x2F;www.bilibili.com&#x2F;video&#x2F;BV1Sx4y1K7Gq 显示正常，但是 https:&#x2F;&#x2F;www.bilibili.com&#x2F;video&#x2F;BV1Sx4y1K7Gq&#x2F;?spm_id_from&#x3D;333.880.my_history.page.click&amp;vd_source&#x3D;5b241fa0dead9a9b680329">
<meta property="og:type" content="article">
<meta property="og:title" content="哔哩哔哩卡片标签外挂">
<meta property="og:url" content="https://hmuseab.github.io/2024/05/18/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E5%8D%A1%E7%89%87%E6%A0%87%E7%AD%BE%E5%A4%96%E6%8C%82/index.html">
<meta property="og:site_name" content="HMuSeaB の 小站">
<meta property="og:description" content="2023-04-04更新：更新连接匹配问题。例如 https:&#x2F;&#x2F;www.bilibili.com&#x2F;video&#x2F;BV1Sx4y1K7Gq 显示正常，但是 https:&#x2F;&#x2F;www.bilibili.com&#x2F;video&#x2F;BV1Sx4y1K7Gq&#x2F;?spm_id_from&#x3D;333.880.my_history.page.click&amp;vd_source&#x3D;5b241fa0dead9a9b680329">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg">
<meta property="article:published_time" content="2024-05-18T13:53:45.000Z">
<meta property="article:modified_time" content="2024-05-18T14:17:34.161Z">
<meta property="article:author" content="HMuSeaB">
<meta property="article:tag" content="博客相关">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://hmuseab.github.io/2024/05/18/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E5%8D%A1%E7%89%87%E6%A0%87%E7%AD%BE%E5%A4%96%E6%8C%82/index.html"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css?v=4.13.0"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.1/css/all.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.33/dist/fancybox/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = {
  root: '/',
  algolia: undefined,
  localSearch: {"path":"/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"找不到您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
  translate: undefined,
  noticeOutdate: {"limitDay":500,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
  highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  dateSuffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  infinitegrid: {
    js: 'https://cdn.jsdelivr.net/npm/@egjs/infinitegrid@4.11.1/dist/infinitegrid.min.js',
    buttonText: '加载更多'
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false,
  percent: {
    toc: true,
    rightside: false,
  },
  autoDarkmode: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '哔哩哔哩卡片标签外挂',
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2024-05-18 22:17:34'
}</script><script>(win=>{
      win.saveToLocal = {
        set: (key, value, ttl) => {
          if (ttl === 0) return
          const now = Date.now()
          const expiry = now + ttl * 86400000
          const item = {
            value,
            expiry
          }
          localStorage.setItem(key, JSON.stringify(item))
        },
      
        get: key => {
          const itemStr = localStorage.getItem(key)
      
          if (!itemStr) {
            return undefined
          }
          const item = JSON.parse(itemStr)
          const now = Date.now()
      
          if (now > item.expiry) {
            localStorage.removeItem(key)
            return undefined
          }
          return item.value
        }
      }
    
      win.getScript = (url, attr = {}) => new Promise((resolve, reject) => {
        const script = document.createElement('script')
        script.src = url
        script.async = true
        script.onerror = reject
        script.onload = script.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          script.onload = script.onreadystatechange = null
          resolve()
        }

        Object.keys(attr).forEach(key => {
          script.setAttribute(key, attr[key])
        })

        document.head.appendChild(script)
      })
    
      win.getCSS = (url, id = false) => new Promise((resolve, reject) => {
        const link = document.createElement('link')
        link.rel = 'stylesheet'
        link.href = url
        if (id) link.id = id
        link.onerror = reject
        link.onload = link.onreadystatechange = function() {
          const loadState = this.readyState
          if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
          link.onload = link.onreadystatechange = null
          resolve()
        }
        document.head.appendChild(link)
      })
    
      win.activateDarkMode = () => {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = () => {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
        if (t === 'dark') activateDarkMode()
        else if (t === 'light') activateLightMode()
      
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
      const detectApple = () => {
        if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
          document.documentElement.classList.add('apple')
        }
      }
      detectApple()
    })(window)</script><link rel="stylesheet" href="/css/style.css"><meta name="generator" content="Hexo 7.2.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://i0.hippopx.com/photos/121/457/241/girls-the-scenery-wallpaper-7f97112750013868bc5bcc249f13e27d.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">14</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">6</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><hr class="custom-hr"/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg')"><nav id="nav"><span id="blog-info"><a href="/" title="HMuSeaB の 小站"><span class="site-name">HMuSeaB の 小站</span></a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search" href="javascript:void(0);"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/music/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> 友链</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> 关于</span></a></div></div><div id="toggle-menu"><a class="site-page" href="javascript:void(0);"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">哔哩哔哩卡片标签外挂</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2024-05-18T13:53:45.000Z" title="发表于 2024-05-18 21:53:45">2024-05-18</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2024-05-18T14:17:34.161Z" title="更新于 2024-05-18 22:17:34">2024-05-18</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">2.9k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>14分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="哔哩哔哩卡片标签外挂"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"><i class="fa-solid fa-spinner fa-spin"></i></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><p>2023-04-04更新：更新连接匹配问题。<br>例如 <a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1Sx4y1K7Gq">https://www.bilibili.com/video/BV1Sx4y1K7Gq</a> 显示正常，<br>但是 <a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1Sx4y1K7Gq/?spm_id_from=333.880.my_history.page.click&vd_source=5b241fa0dead9a9b68032971967b01c9">https://www.bilibili.com/video/BV1Sx4y1K7Gq/?spm_id_from=333.880.my_history.page.click&amp;vd_source=5b241fa0dead9a9b68032971967b01c9</a> 无法正常显示。</p>
<p>2023-04-01更新：添加简介显示，使用时可选择关闭。</p>
<h2 id="一、前言"><a href="#一、前言" class="headerlink" title="一、前言"></a>一、前言</h2><p>群里有一位小伙伴问这个文章的b站视频卡片样式怎么实现的：<a target="_blank" rel="noopener" href="https://cyborg2077.github.io/2023/02/10/XuechengOnlinePart3/">学成在线–媒资管理模块开发</a><br>看着还不错便来了兴致决定弄一下，通过 f12 查到了 api 地址，感谢<a target="_blank" rel="noopener" href="https://blog.4t.pw/">@怕冷爱上雪</a>提供帮助。</p>
<p>因为官方 api 不能直接使用，于是便尝试使用 vercel 来作为中转使用（早就想尝试使用 vercel 托管 api）。</p>
<h2 id="二、教程"><a href="#二、教程" class="headerlink" title="二、教程"></a>二、教程</h2><h3 id="bilibili-js"><a href="#bilibili-js" class="headerlink" title="bilibili.js"></a>bilibili.js</h3><p>在<code>[blogroot]\themes\butterfly\scripts\tag</code>下新建文件<code>bilibili.js</code>并粘贴如下代码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line">JS</span><br><span class="line"></span><br><span class="line">&#x27;use strict&#x27;</span><br><span class="line">let playIcon = `&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 20 20&quot; fill=&quot;none&quot; class=&quot;icon&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M4.67735 4.2798C5.98983 4.1725 7.85812 4.0625 10 4.0625C12.1421 4.0625 14.0105 4.17252 15.323 4.27983C16.2216 4.3533 16.9184 5.04049 16.9989 5.9318C17.0962 7.00837 17.1875 8.43614 17.1875 10C17.1875 11.5639 17.0962 12.9916 16.9989 14.0682C16.9184 14.9595 16.2216 15.6467 15.323 15.7202C14.0105 15.8275 12.1421 15.9375 10 15.9375C7.85812 15.9375 5.98983 15.8275 4.67735 15.7202C3.77861 15.6467 3.08174 14.9593 3.00119 14.0678C2.90388 12.9908 2.8125 11.5627 2.8125 10C2.8125 8.43727 2.90388 7.00924 3.00119 5.93221C3.08174 5.04067 3.77861 4.35327 4.67735 4.2798ZM10 2.8125C7.81674 2.8125 5.9136 2.92456 4.5755 3.03395C3.07738 3.15643 1.8921 4.31616 1.75626 5.81973C1.65651 6.92379 1.5625 8.39058 1.5625 10C1.5625 11.6094 1.65651 13.0762 1.75626 14.1803C1.8921 15.6838 3.07738 16.8436 4.5755 16.966C5.9136 17.0754 7.81674 17.1875 10 17.1875C12.1835 17.1875 14.0868 17.0754 15.4249 16.966C16.9228 16.8436 18.108 15.6841 18.2438 14.1807C18.3435 13.077 18.4375 11.6105 18.4375 10C18.4375 8.38948 18.3435 6.92296 18.2438 5.81931C18.108 4.31588 16.9228 3.15645 15.4249 3.03398C14.0868 2.92458 12.1835 2.8125 10 2.8125ZM12.1876 10.722C12.7431 10.4013 12.7431 9.59941 12.1876 9.27866L9.06133 7.47373C8.50577 7.15298 7.81133 7.55392 7.81133 8.19542V11.8053C7.81133 12.4468 8.50577 12.8477 9.06133 12.527L12.1876 10.722Z&quot; fill=&quot;#9499A0&quot;/&gt;&lt;/svg&gt;`</span><br><span class="line">let likeIcon = `&lt;svg width=&quot;36&quot; height=&quot;36&quot; viewBox=&quot;0 0 36 36&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;icon&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;`</span><br><span class="line">let coinIcon = `&lt;svg width=&quot;28&quot; height=&quot;28&quot; viewBox=&quot;0 0 28 28&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; class=&quot;icon&quot; style=&quot;fill:;&quot;&gt;&lt;path fill-rule=&quot;evenodd&quot; clip-rule=&quot;evenodd&quot; d=&quot;M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;`</span><br><span class="line"></span><br><span class="line">function bilibili(args) &#123;</span><br><span class="line">  const id = args[0].replace(/.*video\/(.*)\/?.*/, &#x27;$1&#x27;)</span><br><span class="line">  const time = args[1]</span><br><span class="line">  const hidden_desc = args[2]</span><br><span class="line">  return `</span><br><span class="line">  &lt;a href=&quot;https://www.bilibili.com/video/$&#123;id&#125;/&quot; class=&quot;bilibili_box&quot; id=&quot;$&#123;id&#125;&quot;&gt;&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">  &lt;script&gt;</span><br><span class="line">    bilibili()</span><br><span class="line">    function bilibili() &#123;</span><br><span class="line">      let dom = document.getElementById(&#x27;$&#123;id&#125;&#x27;)</span><br><span class="line">      fetch(&#x27;https://api.320.ink/api/b?id=$&#123;id&#125;&#x27;).then(res=&gt;res.json()).then(data=&gt;&#123;</span><br><span class="line">        dom.innerHTML = \`</span><br><span class="line">        &lt;div class=&quot;bilibili_cover&quot;&gt;</span><br><span class="line">          &lt;img src=&quot;https://s1.hdslb.com/bfs/static/player/img/play.svg&quot; class=&quot;play_icon no-lazyload&quot;&gt;</span><br><span class="line">          &lt;img src=&quot;\$&#123;data.pic + &#x27;&amp;h=300&#x27;&#125;&quot; class=&quot;no-lazyload&quot;&gt;</span><br><span class="line">          $&#123;time ? `&lt;span&gt;$&#123;time&#125;&lt;/span&gt;` : &#x27;&#x27;&#125;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">        &lt;div class=&quot;bilibili_info&quot;&gt;</span><br><span class="line">          &lt;div class=&quot;title&quot;&gt;\$&#123;data.title&#125;&lt;/div&gt;</span><br><span class="line">          $&#123;hidden_desc == &#x27;true&#x27; ? &#x27;&#x27; : &#x27;&lt;div class=&quot;desc&quot;&gt;\$&#123;data.desc&#125;&lt;/div&gt;&#x27;&#125;</span><br><span class="line">          &lt;div class=&quot;stat&quot;&gt;</span><br><span class="line">            &lt;span&gt;$&#123;playIcon&#125;\$&#123;data.view&#125;&lt;/span&gt;</span><br><span class="line">            &lt;span&gt;$&#123;likeIcon&#125;\$&#123;data.like&#125;&lt;/span&gt;</span><br><span class="line">            &lt;span&gt;$&#123;coinIcon&#125;\$&#123;data.coin&#125;&lt;/span&gt;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">          &lt;div class=&quot;owner&quot;&gt;</span><br><span class="line">            &lt;span class=&quot;tip&quot;&gt;视频&lt;/span&gt;</span><br><span class="line">            &lt;img src=&quot;\$&#123;data.face + &#x27;&amp;h=100&#x27;&#125;&quot; class=&quot;no-lazyload&quot;&gt;</span><br><span class="line">            &lt;span&gt;\$&#123;data.owner&#125;&lt;/span&gt;</span><br><span class="line">          &lt;/div&gt;</span><br><span class="line">        &lt;/div&gt;</span><br><span class="line">        \`</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br><span class="line">  &lt;/script&gt;</span><br><span class="line">  `</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">hexo.extend.tag.register(&#x27;bilibili&#x27;, bilibili, &#123; ends: false &#125;)</span><br></pre></td></tr></table></figure>

<h3 id="bilibili-styl"><a href="#bilibili-styl" class="headerlink" title="bilibili.styl"></a>bilibili.styl</h3><p>在<code>[blogroot]\themes\butterfly\source\css\_tags</code>下新建文件<code>bilbili.styl</code>并粘贴如下代码：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br></pre></td><td class="code"><pre><span class="line">PLAINTEXT</span><br><span class="line"></span><br><span class="line">.bilibili_box</span><br><span class="line">  display: flex</span><br><span class="line">  background: var(--card-bg)</span><br><span class="line">  border: 1px solid #e0e3ed</span><br><span class="line">  border-radius: 10px</span><br><span class="line">  overflow: hidden</span><br><span class="line">  color: var(--font-color) !important</span><br><span class="line">  text-decoration: none !important</span><br><span class="line">  transition: .3s</span><br><span class="line">  &amp;:hover</span><br><span class="line">    border-color: #4976f5</span><br><span class="line">  +maxWidth768()</span><br><span class="line">    flex-direction: column</span><br><span class="line">  .bilibili_cover</span><br><span class="line">    width: 234px</span><br><span class="line">    position relative</span><br><span class="line">    +maxWidth768()</span><br><span class="line">      width: 100%</span><br><span class="line">    img</span><br><span class="line">      width: 100%</span><br><span class="line">      filter: none</span><br><span class="line">      margin: 0 !important</span><br><span class="line">      border-radius: 0 !important</span><br><span class="line">    .play_icon</span><br><span class="line">      position: absolute</span><br><span class="line">      width 45px</span><br><span class="line">      height 45px</span><br><span class="line">      opacity .8</span><br><span class="line">      top: 50%</span><br><span class="line">      left 50%</span><br><span class="line">      transform: translate(-50%,-50%)</span><br><span class="line">    span </span><br><span class="line">      position: absolute</span><br><span class="line">      bottom: 0px</span><br><span class="line">      right: 5px</span><br><span class="line">      color: white</span><br><span class="line">      text-shadow: 0 1px 3px #7a7a7a</span><br><span class="line">  .bilibili_info</span><br><span class="line">    padding: 10px 10px 10px 18px</span><br><span class="line">    line-height: 1</span><br><span class="line">    width: calc(100% - 200px)</span><br><span class="line">    display: flex</span><br><span class="line">    flex-direction: column</span><br><span class="line">    justify-content: space-around</span><br><span class="line">    +maxWidth768()</span><br><span class="line">      width: 100%</span><br><span class="line">      padding-bottom: 25px</span><br><span class="line">      line-height: 1.5</span><br><span class="line">    .title </span><br><span class="line">      font-size: 1.2rem</span><br><span class="line">      font-weight: bold</span><br><span class="line">      white-space: nowrap</span><br><span class="line">      overflow: hidden</span><br><span class="line">      text-overflow: ellipsis</span><br><span class="line">      line-height: 1.5</span><br><span class="line">    .desc </span><br><span class="line">      font-size: 15px</span><br><span class="line">      margin: 2px 0 4px</span><br><span class="line">      white-space: nowrap</span><br><span class="line">      overflow: hidden</span><br><span class="line">      text-overflow: ellipsis</span><br><span class="line">      +maxWidth768()</span><br><span class="line">        // word-break: break-all</span><br><span class="line">        white-space: normal</span><br><span class="line">        display:-webkit-box;</span><br><span class="line">        -webkit-box-orient:vertical;</span><br><span class="line">        -webkit-line-clamp:2; </span><br><span class="line">    .stat </span><br><span class="line">      font-size: 15px</span><br><span class="line">      svg</span><br><span class="line">        margin-right: 3px</span><br><span class="line">        font-size: 18px</span><br><span class="line">        width: 1em</span><br><span class="line">        height: 1em</span><br><span class="line">        path</span><br><span class="line">          fill: var(--font-color)</span><br><span class="line">      span</span><br><span class="line">        margin-right: 10px</span><br><span class="line">        display: inline-flex</span><br><span class="line">        align-items: center</span><br><span class="line">    .owner </span><br><span class="line">      display: flex</span><br><span class="line">      align-items: center</span><br><span class="line">      line-height: 1</span><br><span class="line">      font-size: 15px</span><br><span class="line">      .tip</span><br><span class="line">        color: #FF6699</span><br><span class="line">        border: 1px solid</span><br><span class="line">        padding: 3px 6px</span><br><span class="line">        font-size: 12px</span><br><span class="line">        border-radius: 5px</span><br><span class="line">        margin-right: 10px</span><br><span class="line">      img</span><br><span class="line">        width 22px</span><br><span class="line">        height: 22px</span><br><span class="line">        border-radius: 50% !important</span><br><span class="line">        object-fit: cover</span><br><span class="line">        margin 0 5px 0 0 !important</span><br><span class="line"></span><br><span class="line">[data-theme=&#x27;light&#x27;] .bilibili_box .bilibili_info .stat svg,</span><br><span class="line">[data-theme=&#x27;dark&#x27;] .bilibili_cover</span><br><span class="line">  opacity .8</span><br></pre></td></tr></table></figure>

<h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><p>使用此标签外挂只需要填写视频链接，填写后将会自动获取信息。<br>视频时长因为不容易通过 api 获取所以设置成了手动填写，反正这个数据基本上不会改变</p>
<blockquote>
<p>如果是手机的话：进入视频之后点击分享，复制链接然后用浏览器打开再复制链接，不要使用短链接</p>
</blockquote>
<p>示例链接：<code>https://www.bilibili.com/video/BV1eh411G7bK/?spm_id_from=333.999.0.0</code></p>
<p>格式如下：（视频时长可填可不填，若需要隐藏简介则必须填写视频时长）</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">MARKDOWN</span><br><span class="line">&#123;% bilibili 视频链接 [视频时长 隐藏简介] %&#125;</span><br></pre></td></tr></table></figure>

<p>若需要隐藏简介只需要添加 true 即可</p>
<p>示例</p>

  <a target="_blank" rel="noopener" href="https://www.bilibili.com/video/BV1eh411G7bK/" class="bilibili_box" id="BV1eh411G7bK"></a>

  <script>
    bilibili()
    function bilibili() {
      let dom = document.getElementById('BV1eh411G7bK')
      fetch('https://api.320.ink/api/b?id=BV1eh411G7bK').then(res=>res.json()).then(data=>{
        dom.innerHTML = `
        <div class="bilibili_cover">
          <img src="https://s1.hdslb.com/bfs/static/player/img/play.svg" class="play_icon no-lazyload">
          <img src="${data.pic + '&h=300'}" class="no-lazyload">
          <span>00:29</span>
        </div>
        <div class="bilibili_info">
          <div class="title">${data.title}</div>
          <div class="desc">${data.desc}</div>
          <div class="stat">
            <span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67735 4.2798C5.98983 4.1725 7.85812 4.0625 10 4.0625C12.1421 4.0625 14.0105 4.17252 15.323 4.27983C16.2216 4.3533 16.9184 5.04049 16.9989 5.9318C17.0962 7.00837 17.1875 8.43614 17.1875 10C17.1875 11.5639 17.0962 12.9916 16.9989 14.0682C16.9184 14.9595 16.2216 15.6467 15.323 15.7202C14.0105 15.8275 12.1421 15.9375 10 15.9375C7.85812 15.9375 5.98983 15.8275 4.67735 15.7202C3.77861 15.6467 3.08174 14.9593 3.00119 14.0678C2.90388 12.9908 2.8125 11.5627 2.8125 10C2.8125 8.43727 2.90388 7.00924 3.00119 5.93221C3.08174 5.04067 3.77861 4.35327 4.67735 4.2798ZM10 2.8125C7.81674 2.8125 5.9136 2.92456 4.5755 3.03395C3.07738 3.15643 1.8921 4.31616 1.75626 5.81973C1.65651 6.92379 1.5625 8.39058 1.5625 10C1.5625 11.6094 1.65651 13.0762 1.75626 14.1803C1.8921 15.6838 3.07738 16.8436 4.5755 16.966C5.9136 17.0754 7.81674 17.1875 10 17.1875C12.1835 17.1875 14.0868 17.0754 15.4249 16.966C16.9228 16.8436 18.108 15.6841 18.2438 14.1807C18.3435 13.077 18.4375 11.6105 18.4375 10C18.4375 8.38948 18.3435 6.92296 18.2438 5.81931C18.108 4.31588 16.9228 3.15645 15.4249 3.03398C14.0868 2.92458 12.1835 2.8125 10 2.8125ZM12.1876 10.722C12.7431 10.4013 12.7431 9.59941 12.1876 9.27866L9.06133 7.47373C8.50577 7.15298 7.81133 7.55392 7.81133 8.19542V11.8053C7.81133 12.4468 8.50577 12.8477 9.06133 12.527L12.1876 10.722Z" fill="#9499A0"/></svg>${data.view}</span>
            <span><svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"></path></svg>${data.like}</span>
            <span><svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="icon" style="fill:;"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z"></path></svg>${data.coin}</span>
          </div>
          <div class="owner">
            <span class="tip">视频</span>
            <img src="${data.face + '&h=100'}" class="no-lazyload">
            <span>${data.owner}</span>
          </div>
        </div>
        `
      })
    }
  </script>
  

<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">MARKDOWN</span><br><span class="line">&#123;% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 %&#125;</span><br><span class="line">&lt;!-- 如果你要隐藏简介，添加true即可（注意，要隐藏简介则必须设置适配时间！），如下 --&gt;</span><br><span class="line">&#123;% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 true %&#125;</span><br></pre></td></tr></table></figure>

<h2 id="三、API-简述"><a href="#三、API-简述" class="headerlink" title="三、API 简述"></a>三、API 简述</h2><p>API地址如下：<br><a target="_blank" rel="noopener" href="https://api.320.ink/api/b">https://api.320.ink/api/b</a></p>
<blockquote>
<p>该api由Vercel托管，强烈建议<a href="javascript:;">自建API</a></p>
</blockquote>
<p>可携带参数：</p>
<ul>
<li><p>id<br>bilibili 视频ID</p>
</li>
<li><p>t</p>
<p>请求单个数据的类型，可选值如下</p>
<table>
<thead>
<tr>
<th>值</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>owner</td>
<td>视频作者名</td>
</tr>
<tr>
<td>face</td>
<td>视频作者头像</td>
</tr>
<tr>
<td>title</td>
<td>视频标题</td>
</tr>
<tr>
<td>desc</td>
<td>视频简介</td>
</tr>
<tr>
<td>pic</td>
<td>视频封面</td>
</tr>
<tr>
<td>view</td>
<td>观看数量</td>
</tr>
<tr>
<td>like</td>
<td>点赞数</td>
</tr>
<tr>
<td>coin</td>
<td>投币数</td>
</tr>
<tr>
<td>danmaku</td>
<td>弹幕数</td>
</tr>
<tr>
<td>favorite</td>
<td>收藏数</td>
</tr>
<tr>
<td>reply</td>
<td>评论数量</td>
</tr>
<tr>
<td>share</td>
<td>分享数量</td>
</tr>
</tbody></table>
</li>
</ul>
<p>示例</p>
<ol>
<li><a target="_blank" rel="noopener" href="https://api.320.ink/api/b?id=BV1eh411G7bK">https://api.320.ink/api/b?id=BV1eh411G7bK</a><br>会返回视频的所有数据</li>
<li><a target="_blank" rel="noopener" href="https://api.320.ink/api/b?id=BV1eh411G7bK&t=view">https://api.320.ink/api/b?id=BV1eh411G7bK&amp;t=view</a><br>会返回视频的观看数量</li>
</ol>
<blockquote>
<p>当然，如果是使用自建API的话你可以随意的修改代码来满足自己的需求。</p>
</blockquote>
<h2 id="四、自建-API"><a href="#四、自建-API" class="headerlink" title="四、自建 API"></a>四、自建 API</h2><p>若没有 vercel 账号请先自行注册<br>自建 API 需要有自己的域名（应该都有吧）</p>
<h3 id="安装cli"><a href="#安装cli" class="headerlink" title="安装cli"></a>安装cli</h3><p>运行如下命令</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">BASH</span><br><span class="line">npm i -g vercel</span><br></pre></td></tr></table></figure>

<h3 id="初始化项目"><a href="#初始化项目" class="headerlink" title="初始化项目"></a>初始化项目</h3><p>新建一个目录，然后在此目录中打开终端<br>运行如下命令然后一路回车</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">BASH</span><br><span class="line">npm init</span><br></pre></td></tr></table></figure>

<h3 id="安装axios"><a href="#安装axios" class="headerlink" title="安装axios"></a>安装axios</h3><p>运行</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">BASH</span><br><span class="line">npm i axios</span><br></pre></td></tr></table></figure>

<h3 id="创建文件"><a href="#创建文件" class="headerlink" title="创建文件"></a>创建文件</h3><p><a target="_blank" rel="noopener" href="https://cdn.leonus.cn/post/leonus_2023-03-31_21-46-57.webp"><img src="https://cdn.leonus.cn/post/leonus_2023-03-31_21-46-57.webp" alt="创建完成效果"></a></p>
<p>创建完成效果</p>
<p>新建 api 目录，然后在 api 目录下创建如下两个文件</p>
<blockquote>
<p>创建的文件名字对应你后期的 api 路径名，如 b.js 对应 xxx.com&#x2F;api&#x2F;b<br>另外，index.js 文件对应的是 xxx.com&#x2F;api</p>
</blockquote>
<p><strong>b.js</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line">BASH</span><br><span class="line"></span><br><span class="line">const axios = require(&#x27;axios&#x27;)</span><br><span class="line">module.exports = async (req, res) =&gt; &#123;</span><br><span class="line">  if (req.method === &#x27;GET&#x27;) &#123;</span><br><span class="line">    if (req.query.id) &#123;</span><br><span class="line">      let &#123; data &#125; = await axios.get(&#x27;https://api.bilibili.com/x/web-interface/view?bvid=&#x27; + req.query.id)</span><br><span class="line">      data = data.data</span><br><span class="line">      let ls = &#123;</span><br><span class="line">        owner: data.owner.name,</span><br><span class="line">        face: &quot;https://images.weserv.nl/?url=&quot; + data.owner.face,</span><br><span class="line">        title: data.title,</span><br><span class="line">        desc: data.desc,</span><br><span class="line">        pic: &quot;https://images.weserv.nl/?url=&quot; + data.pic,</span><br><span class="line">        coin: data.stat.coin,</span><br><span class="line">        danmaku: data.stat.danmaku,</span><br><span class="line">        favorite: data.stat.favorite,</span><br><span class="line">        like: data.stat.like,</span><br><span class="line">        reply: data.stat.reply,</span><br><span class="line">        share: data.stat.share,</span><br><span class="line">        view: data.stat.view,</span><br><span class="line">      &#125;</span><br><span class="line">      if (req.query.t) &#123; return res.send(ls[req.query.t]) &#125; else return res.send(JSON.stringify(ls))</span><br><span class="line">    &#125; else &#123; return res.send(&#x27;Hello World!&#x27;) &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>为了避免访问 xxx.com&#x2F;api 报错，我们给它也添加一个内容让他返回 Hello World<br><strong>index.js</strong></p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">BASH</span><br><span class="line">module.exports = (req, res) =&gt; &#123;</span><br><span class="line">  return res.status(200).send(&#x27;Hello World!&#x27;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在根目录下创建 <strong>vercel.json</strong> 文件并粘贴如下代码：<br>(这一步是为了防止跨域)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line">JSON</span><br><span class="line"></span><br><span class="line">&#123;</span><br><span class="line">  &quot;headers&quot;: [</span><br><span class="line">    &#123;</span><br><span class="line">      &quot;source&quot;: &quot;/api/(.*)&quot;,</span><br><span class="line">      &quot;headers&quot;: [</span><br><span class="line">        &#123;</span><br><span class="line">          &quot;key&quot;: &quot;Access-Control-Allow-Origin&quot;,</span><br><span class="line">          &quot;value&quot;: &quot;*&quot;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          &quot;key&quot;: &quot;Access-Control-Allow-Headers&quot;,</span><br><span class="line">          &quot;value&quot;: &quot;X-Requested-With, Content-Type, Authorization&quot;</span><br><span class="line">        &#125;,</span><br><span class="line">        &#123;</span><br><span class="line">          &quot;key&quot;: &quot;Access-Control-Allow-Credentials&quot;,</span><br><span class="line">          &quot;value&quot;: &quot;true&quot;</span><br><span class="line">        &#125;</span><br><span class="line">      ]</span><br><span class="line">    &#125;</span><br><span class="line">  ]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="部署"><a href="#部署" class="headerlink" title="部署"></a>部署</h3><h4 id="本地"><a href="#本地" class="headerlink" title="本地"></a>本地</h4><p>在部署前先运行如下命令来测试代码是否生效</p>
<blockquote>
<p>第一次运行会让登录和创建项目，登陆的话选择你平时登录的方式<strong>例如 github</strong> 回车即可，在浏览器完成授权就登陆成功了。创建项目就直接一路回车即可。</p>
</blockquote>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">BASH</span><br><span class="line">vercel dev</span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://cdn.leonus.cn/post/leonus_2023-03-31_21-48-18.webp"><img src="https://cdn.leonus.cn/post/leonus_2023-03-31_21-48-18.webp" alt="index.js正常"></a></p>
<p>index.js正常</p>
<p><a target="_blank" rel="noopener" href="https://cdn.leonus.cn/post/leonus_2023-03-31_21-52-25.webp"><img src="https://cdn.leonus.cn/post/leonus_2023-03-31_21-52-25.webp" alt="b.js正常"></a></p>
<p>b.js正常</p>
<p>本地测试没问题了就可以运行如下命令进行线上部署了。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">BASH</span><br><span class="line">vercel --prod</span><br></pre></td></tr></table></figure>

<p><a target="_blank" rel="noopener" href="https://cdn.leonus.cn/post/leonus_2023-03-31_21-56-50.webp"><img src="https://cdn.leonus.cn/post/leonus_2023-03-31_21-56-50.webp" alt="部署成功"></a></p>
<p>部署成功</p>
<p><a target="_blank" rel="noopener" href="https://cdn.leonus.cn/post/leonus_2023-03-31_21-57-59.webp"><img src="https://cdn.leonus.cn/post/leonus_2023-03-31_21-57-59.webp" alt="挂梯正常访问"></a></p>
<p>挂梯正常访问</p>
<h4 id="vercel-网站"><a href="#vercel-网站" class="headerlink" title="vercel 网站"></a>vercel 网站</h4><p>官方提供的网址在国内是无法访问的，所以我们需要自己绑定一个域名</p>
<p>打开 <a target="_blank" rel="noopener" href="https://vercel.com/">Vercel</a>，登录之后点击 api 项目，依次点击 setting，domains，填写域名然后添加解析即可。</p>
<p>为了提升一点点的访问速度，我们再改一下地区。<br>选择 functions 然后选择香港。选择之后需要重新部署，再运行一遍<code>vercel --prod</code>就行。</p>
<p><a target="_blank" rel="noopener" href="https://cdn.leonus.cn/post/leonus_2023-03-31_21-59-44.webp"><img src="https://cdn.leonus.cn/post/leonus_2023-03-31_21-59-44.webp" alt="配置域名"></a></p>
<p>配置域名</p>
<p><a target="_blank" rel="noopener" href="https://cdn.leonus.cn/post/leonus_2023-03-31_21-56-02.webp"><img src="https://cdn.leonus.cn/post/leonus_2023-03-31_21-56-02.webp" alt="配置地区"></a></p>
<p>配置地区</p>
<h2 id="五、参考文献"><a href="#五、参考文献" class="headerlink" title="五、参考文献"></a>五、参考文献</h2><ol>
<li><a target="_blank" rel="noopener" href="https://devpress.csdn.net/cloudnative/62fb77cc7e6682346618ec34.html#devmenu6">https://devpress.csdn.net/cloudnative/62fb77cc7e6682346618ec34.html#devmenu6</a></li>
<li><a target="_blank" rel="noopener" href="https://devpress.csdn.net/cloudnative/62fb751ac67703293080018b.html">https://devpress.csdn.net/cloudnative/62fb751ac67703293080018b.html</a></li>
</ol>
<p><strong>文章作者:</strong> <a target="_blank" rel="noopener" href="https://blog.leonus.cn/">Leonus</a></p>
<p><strong>文章链接:</strong> <a target="_blank" rel="noopener" href="https://blog.leonus.cn/2023/butterflyTag-1.html">https://blog.leonus.cn/2023/butterflyTag-1.html</a></p>
<p><strong>版权声明:</strong> 本博客所有文章除特别声明外，均采用 <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a target="_blank" rel="noopener" href="https://blog.leonus.cn/">Leonus</a>！</p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta"><i class="fas fa-circle-user fa-fw"></i>文章作者: </span><span class="post-copyright-info"><a href="https://hmuseab.github.io">HMuSeaB</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta"><i class="fas fa-square-arrow-up-right fa-fw"></i>文章链接: </span><span class="post-copyright-info"><a href="https://hmuseab.github.io/2024/05/18/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E5%8D%A1%E7%89%87%E6%A0%87%E7%AD%BE%E5%A4%96%E6%8C%82/">https://hmuseab.github.io/2024/05/18/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E5%8D%A1%E7%89%87%E6%A0%87%E7%AD%BE%E5%A4%96%E6%8C%82/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta"><i class="fas fa-circle-exclamation fa-fw"></i>版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://hmuseab.github.io" target="_blank">HMuSeaB の 小站</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/%E5%8D%9A%E5%AE%A2%E7%9B%B8%E5%85%B3/">博客相关</a></div><div class="post_share"><div class="social-share" data-image="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.3/sharejs/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1.1.3/sharejs/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="next-post pull-full"><a href="/2024/04/26/Vim%E7%AE%80%E4%BB%8B/" title="Vim简介"><img class="cover" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="onerror=null;src='/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">Vim简介</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>相关推荐</span></div><div class="relatedPosts-list"><div><a href="/2023/04/30/NotionNext-%E5%BF%AB%E9%80%9F%E5%85%8D%E8%B4%B9%E6%90%AD%E5%BB%BA%E7%BD%91%E7%AB%99/" title="NotionNext-快速免费搭建网站"><img class="cover" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-04-30</div><div class="title">NotionNext-快速免费搭建网站</div></div></a></div><div><a href="/2023/04/15/github%E5%9B%BE%E5%BA%8A%E4%BB%8B%E7%BB%8D/" title="github图床介绍"><img class="cover" src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2023-04-15</div><div class="title">github图床介绍</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://i0.hippopx.com/photos/121/457/241/girls-the-scenery-wallpaper-7f97112750013868bc5bcc249f13e27d.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">HMuSeaB</div><div class="author-info__description">MuSea的blog，欢迎访问</div></div><div class="card-info-data site-data is-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">14</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">6</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/HMuSeaB" target="_blank" title="Github"><i class="fab fa-github" style="color: #24292e;"></i></a><a class="social-icon" href="mailto:huangsibo948@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope" style="color: #4a7dbe;"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E3%80%81%E5%89%8D%E8%A8%80"><span class="toc-number">1.</span> <span class="toc-text">一、前言</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8C%E3%80%81%E6%95%99%E7%A8%8B"><span class="toc-number">2.</span> <span class="toc-text">二、教程</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#bilibili-js"><span class="toc-number">2.1.</span> <span class="toc-text">bilibili.js</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#bilibili-styl"><span class="toc-number">2.2.</span> <span class="toc-text">bilibili.styl</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BD%BF%E7%94%A8"><span class="toc-number">2.3.</span> <span class="toc-text">使用</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%89%E3%80%81API-%E7%AE%80%E8%BF%B0"><span class="toc-number">3.</span> <span class="toc-text">三、API 简述</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9B%9B%E3%80%81%E8%87%AA%E5%BB%BA-API"><span class="toc-number">4.</span> <span class="toc-text">四、自建 API</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85cli"><span class="toc-number">4.1.</span> <span class="toc-text">安装cli</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE"><span class="toc-number">4.2.</span> <span class="toc-text">初始化项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%89%E8%A3%85axios"><span class="toc-number">4.3.</span> <span class="toc-text">安装axios</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%88%9B%E5%BB%BA%E6%96%87%E4%BB%B6"><span class="toc-number">4.4.</span> <span class="toc-text">创建文件</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%83%A8%E7%BD%B2"><span class="toc-number">4.5.</span> <span class="toc-text">部署</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9C%AC%E5%9C%B0"><span class="toc-number">4.5.1.</span> <span class="toc-text">本地</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#vercel-%E7%BD%91%E7%AB%99"><span class="toc-number">4.5.2.</span> <span class="toc-text">vercel 网站</span></a></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%94%E3%80%81%E5%8F%82%E8%80%83%E6%96%87%E7%8C%AE"><span class="toc-number">5.</span> <span class="toc-text">五、参考文献</span></a></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/2024/05/18/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E5%8D%A1%E7%89%87%E6%A0%87%E7%AD%BE%E5%A4%96%E6%8C%82/" title="哔哩哔哩卡片标签外挂"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="哔哩哔哩卡片标签外挂"/></a><div class="content"><a class="title" href="/2024/05/18/%E5%93%94%E5%93%A9%E5%93%94%E5%93%A9%E5%8D%A1%E7%89%87%E6%A0%87%E7%AD%BE%E5%A4%96%E6%8C%82/" title="哔哩哔哩卡片标签外挂">哔哩哔哩卡片标签外挂</a><time datetime="2024-05-18T13:53:45.000Z" title="发表于 2024-05-18 21:53:45">2024-05-18</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2024/04/26/Vim%E7%AE%80%E4%BB%8B/" title="Vim简介"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Vim简介"/></a><div class="content"><a class="title" href="/2024/04/26/Vim%E7%AE%80%E4%BB%8B/" title="Vim简介">Vim简介</a><time datetime="2024-04-26T09:11:41.000Z" title="发表于 2024-04-26 17:11:41">2024-04-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/04/30/%E2%80%9C%E9%95%BF%E5%A4%A7%E5%90%8E%E6%89%8D%E5%8F%91%E7%8E%B0%EF%BC%8C%E8%AF%AD%E6%96%87%E8%AF%BE%E6%9C%AC%E9%87%8C%E9%9D%A2%E5%85%A8%E6%98%AF%E5%88%80%EF%BC%81%EF%BC%81%EF%BC%81%E2%80%9D/" title="“长大后才发现，语文课本里面全是刀！！！”"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="“长大后才发现，语文课本里面全是刀！！！”"/></a><div class="content"><a class="title" href="/2023/04/30/%E2%80%9C%E9%95%BF%E5%A4%A7%E5%90%8E%E6%89%8D%E5%8F%91%E7%8E%B0%EF%BC%8C%E8%AF%AD%E6%96%87%E8%AF%BE%E6%9C%AC%E9%87%8C%E9%9D%A2%E5%85%A8%E6%98%AF%E5%88%80%EF%BC%81%EF%BC%81%EF%BC%81%E2%80%9D/" title="“长大后才发现，语文课本里面全是刀！！！”">“长大后才发现，语文课本里面全是刀！！！”</a><time datetime="2023-04-30T08:44:00.000Z" title="发表于 2023-04-30 16:44:00">2023-04-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/04/30/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" title="Replit博客【已失效，留帖以纪念】"><img src="https://i.loli.net/2020/05/01/gkihqEjXxJ5UZ1C.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Replit博客【已失效，留帖以纪念】"/></a><div class="content"><a class="title" href="/2023/04/30/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA/" title="Replit博客【已失效，留帖以纪念】">Replit博客【已失效，留帖以纪念】</a><time datetime="2023-04-30T08:44:00.000Z" title="发表于 2023-04-30 16:44:00">2023-04-30</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/2023/04/30/%E2%80%9C%E7%8E%AB%E7%91%B0%E5%A4%AA%E8%B4%B5%E4%BA%86%EF%BC%8C%E2%BD%A4%E9%87%8E%E8%8D%89%E7%BA%AA%E5%BF%B5%E6%88%91%E5%90%A7%EF%BC%8C%E6%BB%A1%E5%9C%B0%E9%83%BD%E6%98%AF%EF%BC%8C%E7%94%9F%E7%94%9F%E4%B8%8D%E6%81%AF%E2%80%9D/" title="“玫瑰太贵了，⽤野草纪念我吧，满地都是，生生不息”"><img src="https://jsd.012700.xyz/gh/jerryc127/CDN@latest/cover/default_bg.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="“玫瑰太贵了，⽤野草纪念我吧，满地都是，生生不息”"/></a><div class="content"><a class="title" href="/2023/04/30/%E2%80%9C%E7%8E%AB%E7%91%B0%E5%A4%AA%E8%B4%B5%E4%BA%86%EF%BC%8C%E2%BD%A4%E9%87%8E%E8%8D%89%E7%BA%AA%E5%BF%B5%E6%88%91%E5%90%A7%EF%BC%8C%E6%BB%A1%E5%9C%B0%E9%83%BD%E6%98%AF%EF%BC%8C%E7%94%9F%E7%94%9F%E4%B8%8D%E6%81%AF%E2%80%9D/" title="“玫瑰太贵了，⽤野草纪念我吧，满地都是，生生不息”">“玫瑰太贵了，⽤野草纪念我吧，满地都是，生生不息”</a><time datetime="2023-04-30T08:30:00.000Z" title="发表于 2023-04-30 16:30:00">2023-04-30</time></div></div></div></div></div></div></main><footer id="footer"><div id="footer-wrap"><div class="copyright">&copy;2020 - 2024 By HMuSeaB</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text"><div><a>很高兴认识你!</div></div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js?v=4.13.0"></script><script src="/js/main.js?v=4.13.0"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0.33/dist/fancybox/fancybox.umd.min.js"></script><script src="https://cdn.jsdelivr.net/npm/instant.page@5.2.0/instantpage.min.js" type="module"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu@4.0.7/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><div class="js-pjax"></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js?v=4.13.0"></script></div></div></body></html>